<!doctype html>
<html class="export">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="Cascading grid layout library">

  <title>Masonry &#xB7; FAQ</title>

    <link rel="stylesheet" href="css/masonry-docs.css" media="screen">

</head>
<body class="page--faq" data-page="faq">

  <div class="site-nav">
    <div class="container">
      <ol class="site-nav__list">
        <li class="site-nav__item site-nav__item--homepage">
          <a href=".">Masonry</a></li>
        <li class="site-nav__item site-nav__item--layout">
          <a href="layout.html">Layout</a></li>
        <li class="site-nav__item site-nav__item--options">
          <a href="options.html">Options</a></li>
        <li class="site-nav__item site-nav__item--methods">
          <a href="methods.html">Methods</a></li>
        <li class="site-nav__item site-nav__item--events">
          <a href="events.html">Events</a></li>
        <li class="site-nav__item site-nav__item--appendix">
          <a href="appendix.html">Appendix</a></li>
        <li class="site-nav__item site-nav__item--faq">
          <a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>


  <div id="content" class="content container">

      <h1>FAQ</h1>

    <ul class="page-nav">
<li class="page-nav__item page-nav__item--h2"><a href="#how-do-i-fix-overlapping-item-elements">How do I fix overlapping item elements?</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#what-is-masonry-s-browser-support">What is Masonry&#x2019;s browser support?</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#what-is-the-difference-between-masonry-isotope-and-packery">What is the difference between Masonry, Isotope, and Packery?</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#the-first-item-breaks-the-grid">The first item breaks the grid!</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#error-cannot-call-methods-on-masonry-prior-to-initialization-attempted-to-call-___">Error: &#x201C;cannot call methods on masonry prior to initialization; attempted to call &apos;___&apos;&#x201D;</a></li>
</ul>



<h2 id="how-do-i-fix-overlapping-item-elements">How do I fix overlapping item elements?</h2>

<p>If your layout has images, you probably need to use <a href="appendix.html#imagesloaded">imagesLoaded</a>.</p>

<p>Overlaping items are caused by items that change size after a layout. This is caused by unloaded media: images, <a href="appendix.html#web-fonts">web fonts</a>, embedded buttons. To fix it, you need to initialize or <a href="methods.html#layout"><code>layout</code></a> after all the items have their proper size.</p>


<h2 id="what-is-masonry-s-browser-support">What is Masonry&#x2019;s browser support?</h2>

<p>Masonry works in IE8+ and modern browsers, including mobile browsers on iOS and Android.</p>


<h2 id="what-is-the-difference-between-masonry-isotope-and-packery">What is the difference between Masonry, Isotope, and Packery?</h2>

<p>Masonry, <a href="http://isotope.metafizzy.co">Isotope</a>, and <a href="http://packery.metafizzy.co">Packery</a> are all similar in that they are layout libraries. Many of their options and methods are the same.</p>

<p>Masonry does cascading grid &quot;masonry&quot; layouts. Packery does bin-packing layouts, which allow it to be used for <a href="">draggable interactions</a>.</p>

<p>Isotope does sorting and filtering. Isotope uses masonry layouts, as well as other layouts. </p>

<p>Masonry is licensed MIT and is freely available for use and distribution. Isotope and Packery have a proprietary license, where you can purchase a license for commercial projects, or use it freely for open-source projects.</p>


<h2 id="the-first-item-breaks-the-grid">The first item breaks the grid!</h2>

<p>You most likely need to set the <a href="options.html#columnwidth"><code>columnWidth</code> option</a>. Without <code>columnWidth</code> set, Masonry will use the width of the first item for the size of its columns.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
$(<span class="string">&apos;.grid&apos;</span>).masonry({
  columnWidth: <span class="number">200</span>
});
<span class="comment">// vanilla JS</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( <span class="string">&apos;.grid&apos;</span>, {
  columnWidth: <span class="number">200</span>
});
</code></pre>


<h2 id="error-cannot-call-methods-on-masonry-prior-to-initialization-attempted-to-call-___">Error: &#x201C;cannot call methods on masonry prior to initialization; attempted to call &apos;___&apos;&#x201D;</h2>

<p>This error occurs when your code attempts to use a <a href="methods.html">method</a> before the Masonry instance has been initialized.</p>

<pre><code class="js"><span class="comment">// This code will trigger the &quot;cannot call methods&quot; error</span>

<span class="jquery_var">$grid</span>.append( $items )
  <span class="comment">// masonry method</span>
  .masonry( <span class="string">&apos;appended&apos;</span>, $items );

<span class="comment">// init Masonry</span>
<span class="jquery_var">$grid</span>.masonry({
  <span class="comment">// options...</span>
});
</code></pre>


<p>This can happen if you have a race condition &#x2014; when one piece of logic may occur before another. This could happen with <a href="appendix.html#imagesloaded">imagesLoaded</a>, Infinite Scroll, or Ajaxing content.</p>

<pre><code class="js"><span class="comment">// race condition with imagesLoaded</span>

<span class="jquery_var">$grid</span>.imagesLoaded( <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="comment">// init Masonry</span>
  <span class="jquery_var">$grid</span>.masonry({
    <span class="comment">// options...</span>
  });
});

<span class="comment">// imagesLoaded will trigger after this</span>
<span class="jquery_var">$grid</span>.append( $items )
  .masonry( <span class="string">&apos;appended&apos;</span>, $items );
</code></pre>

<p>To resolve this, make sure that the Masonry instance has been initialized before the method is called.</p>

<pre><code class="js"><span class="jquery_var">$grid</span>.imagesLoaded( <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="comment">// init Masonry</span>
  <span class="jquery_var">$grid</span>.masonry({
    <span class="comment">// options...</span>
  });
  <span class="comment">// Masonry has been initialized, okay to call methods</span>
  <span class="jquery_var">$grid</span>.append( $items )
    .masonry( <span class="string">&apos;appended&apos;</span>, $items );
});
</code></pre>

<pre><code class="js"><span class="comment">// another fix, init Masonry first, before imagesLoaded</span>
<span class="jquery_var">$grid</span>.masonry({
  <span class="comment">// options...</span>
});
<span class="comment">// okay to call methods</span>
<span class="jquery_var">$grid</span>.append( $items )
  .masonry( <span class="string">&apos;appended&apos;</span>, $items );
<span class="comment">// just do layout on imagesLoaded</span>
<span class="jquery_var">$grid</span>.imagesLoaded( <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
  <span class="jquery_var">$grid</span>.masonry(<span class="string">&apos;layout&apos;</span>);
});
</code></pre>


  </div>

  <div class="site-nav">
    <div class="container">
      <ol class="site-nav__list">
        <li class="site-nav__item site-nav__item--homepage">
          <a href=".">Masonry</a></li>
        <li class="site-nav__item site-nav__item--layout">
          <a href="layout.html">Layout</a></li>
        <li class="site-nav__item site-nav__item--options">
          <a href="options.html">Options</a></li>
        <li class="site-nav__item site-nav__item--methods">
          <a href="methods.html">Methods</a></li>
        <li class="site-nav__item site-nav__item--events">
          <a href="events.html">Events</a></li>
        <li class="site-nav__item site-nav__item--appendix">
          <a href="appendix.html">Appendix</a></li>
        <li class="site-nav__item site-nav__item--faq">
          <a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>

  <div class="site-footer">
  
    <div class="container">
        <p class="site-footer__copy">
          Masonry is made by <a href="http://desandro.com">David DeSandro</a>.
          Make something rad with it.
        </p>
  
  
      <p class="site-footer__copy">Help improve these docs.
        <a href="https://github.com/desandro/masonry-docs/issues/">Open an issue</a> or
        <a href="https://github.com/desandro/masonry-docs/blob/master/content/faq.mustache">pull request</a>.</p>
  
    </div>
  
  </div>

<!-- Masonry does NOT require jQuery.
     jQuery is only used to demonstrate Masonry as a jQuery plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="bower_components/jquery/dist/jquery.min.js"><\/script>')</script>

  <script src="js/masonry-docs.min.js"></script>


</body>
</html>
